<template>
  <div class="swiper-box">
    <swiper class="swiper"
            :current="current"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            :circular="circular"
            @change="swiperChange($event)"
    >
      <block v-for="img in images" :key="img">
        <swiper-item>
          <image :src="img" class="slide-image" mode="aspectFill"/>
        </swiper-item>
      </block>
    </swiper>

    <div class="num-box">{{currentIndex}}/{{images.length}}</div>
  </div>
</template>

<script>
  export default {
    props: {
      images: {
        type: Array
      }
    },
    data () {
      return {
        autoplay: true,
        interval: 3000,
        duration: 500,
        circular: true,
        current: 0,
        currentIndex: 1
      }
  },
    methods: {
      swiperChange (e) {
        this.current = e.mp.detail.current
        this.currentIndex = e.mp.detail.current + 1
      }
    }
  }
</script>

<style scoped lang="scss">
  .swiper-box {
    position: relative;
    .swiper {
      height: 250px !important;
      image {
        height: 100%;
        width: 100%;
        background: #333333;
      }
    }
    .num-box {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 16px;
      color: rgb(86, 86, 86);
    }
  }
</style>
